<template>
  <div class="container">
        <div class="content-img">
            <img :src="book.imgurl" />
            <!-- 3.这里实现图片放大镜的功能 -->
            <!-- <pic-zoom :url="book.imgurl"  :scale="3" :scroll="true" width="100%" height="100%"></pic-zoom> -->
        </div>
        <div class="item-content">
          <div class="book-info">
            <div class="bname">
              <h2>{{book.name}}</h2>
            </div>
            <div class="category">
              <span>
                分类:
                <span class="name">{{book.category}}</span>
              </span>
            </div>
            <div class="detail-book-desc">
              <h3>{{book.desc}}</h3>
            </div>
            <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            ></el-rate>
            <div class="detail-book-price">
              <p>胡椒价</p>
              <!-- <a href="#" style="display:inline">降价通知</a> -->
              <span class="seckill-price text-danger">
                <!-- <Icon type="logo-yen"></Icon> -->
                ￥{{book.price}}
              </span>             
            </div>
          </div>
          <div class="book-detail-buy">
            <div class="book-detail-computer">
              <!-- <Computer></Computer> -->
              <br />
              <span>
                每账户最多买
                <em style="color:red">9</em>件
              </span>
            </div>
            <el-button icon="el-icon-shopping-cart-1" type="success" @click="addShopCart">加入购物车</el-button>
            <el-button type="danger" plain @click="toBuy">立即购买</el-button>
          </div>
        </div>
      </div>
</template>

<script>
import axios from "axios";
import myapi from "../api";
import PicZoom from "vue-piczoom";
export default {
    name:'/BookDetails',
    dta(){
      return{
        book:{}
      }
    },
    methods:{
       addShopCart(){
      this.$store.commit('addBook',this.book);
      this.$router.push('/cart');
       }
    },
    mounted(){
      this.book=this.$store.state.book;       
    },
    components:{
      PicZoom
    }
}
</script>

<style scoped>

.container {
  /* padding-top:50px ; */
  margin-left: 20%;
  margin-top: 20px;
  margin-top: 50px;
  height: 600px;
  display: flex;
}
.seckill-item {
  display: flex;
}
.item-content {
  margin-left: 20px;
  width: 700px;
}
.bname {
  font-size: 20px;
  color: black;
}
/* 装图片的容器 */
.content-img {
  width: 320px;
  height: 320px;
}
.content-img img {
  height: 100%;
  width: 100%;
}
.category .name {
  color: blue;
}
.detail-book-desc {
  margin: 10px auto;
  color: black;
  font-family: Microsoft Yahei;
}
.detail-book-price {
  padding-top: 25px;
  margin-bottom: 10px;
  height: 150px;
  background-color: #fcfaf7;
}
.detail-book-price span:nth-child(2) {
  color: red;
  font-size: 25px;
}
.detail-book-price p {
  margin-left: 8px;
  color: gray;
  font-size: 15px;
}
.book-detail-buy {
  margin-top: 40px;
}
.book-detail-computer {
  margin-bottom: 10px;
}
.book-detail-computer span {
  margin-top: 5px;
}
</style>